<template>
        <div>
          <el-breadcrumb separator-class='el-icon-arrow-right'>
            <el-breadcrumb-item v-bind:to='{ path: "/" }'>首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
          </el-breadcrumb>
          <div class='dict-main'>
            <el-tabs v-model='activeName'   @tab-click='handleClick' class='title-top'>
              <el-tab-pane  label='角色管理' name='index'>
                <div class='main-module'>
                  <div class='btn-module' >
                    <el-button  size='small' @click='openRole' type='primary' icon='el-icon-plus'>新增</el-button>
                  </div>
                  <el-table :data='tableData' stripe style='width: 100%'>
                    <!--<el-table-column  label='ID' prop='id' width='120' align='center'></el-table-column>-->
                    <el-table-column  label='角色编码' prop='code' align='center' width='200'></el-table-column>
                    <el-table-column  label='角色名称' prop='name' align='center' width='200'></el-table-column>
                    <el-table-column  label='描述' prop='remarks' align='center'></el-table-column>
                    <el-table-column  label='角色状态' align='center' width='100'>
                      <template scope='scope'>
                        {{scope.row.status===0?'禁用':'启用'}}
                      </template>
                    </el-table-column>

                    <el-table-column label='操作' fixed='right' align='center' width='300'>
                      <template slot-scope='scope'>
                        <el-button size='mini' type='primary'  @click='openUpdate(scope.row)' >修改</el-button>
                        <el-button size='mini' type='success'  @click='openMenu(scope.row)' >菜单<i class="el-icon-question"></i></el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <!--分页-->
                  <div class='block text-center'>
                    <el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange' :current-page='pageable.currentPage' :page-sizes='[10, 20, 40, 80, 100]' :page-size='pageable.pageSize' layout='total, sizes, prev, pager, next, jumper' :total='pageable.total'></el-pagination>
                  </div>
                  <!--</div>-->

                  <!-- 新增,修改弹窗-->
                  <div>
                    <el-dialog :title='RoleTextMap[dialogRoleOption]' :visible.sync='dialogRoleVisible' >
                      <el-form  :model='roleForm' :rules='rules' ref='roleForm' label-width='100px'>
                        <el-form-item label='' prop='id'  style='display: none' >
                          <el-input  v-model='roleForm.id' ></el-input>
                        </el-form-item>
                        <el-form-item label='角色编码' prop='code' >
                          <el-input placeholder='请输入角色编码' v-model='roleForm.code' @blur='isExistCode()' v-if='dialogRoleOption=="update"' disabled></el-input>
                          <el-input placeholder='请输入角色编码' v-model='roleForm.code' @blur='isExistCode()' v-else></el-input>
                        </el-form-item>
                        <el-form-item label='角色名称' prop='name'>
                          <el-input placeholder='请输入角色名称' v-model='roleForm.name'></el-input>
                        </el-form-item>
                        <el-form-item label='角色描述' prop='remarks'>
                          <el-input placeholder='请输入角色描述,100字以内' v-model='roleForm.remarks'></el-input>
                        </el-form-item>
                        <el-form-item label='角色状态' prop='status'>
                          <el-radio-group v-model='roleForm.status'>
                            <el-radio :label='1'>启用</el-radio>
                            <el-radio :label='0'>禁用</el-radio>
                          </el-radio-group>
                        </el-form-item>

                      </el-form>
                      <div slot='footer' class='dialog-footer'>
                        <el-button @click='cancel("roleForm")' >取 消</el-button>
                        <el-button :disabled='isDisable' v-if='dialogRoleOption=="create"'  type='primary' @click='saveRole("roleForm")'>确 定</el-button>
                        <el-button :disabled='isDisable' type='primary' v-if='dialogRoleOption=="update"' @click='updateRole("roleForm")' >确 定</el-button>
                      </div>
                    </el-dialog>
                  </div>


                  <!-- 分配菜单-->
                  <div>
                    <el-dialog :title='RoleTextMap[dialogRoleOption]' :visible.sync='dialogMenuVisible' >
                      <el-tree
                        class='filter-tree'
                        highlight-current
                        node-key='id'
                        :data='allMenu'
                        show-checkbox
                        :expand-on-click-node='false'
                        :accordion='true'
                        :indent=32
                        ref='menuTree'
                        :props='defaultProps'>
                      </el-tree>
                      <div slot='footer' class='dialog-footer'>
                        <el-button @click='cancelMenu()' >取 消</el-button>
                        <el-button :disabled='isDisable' type='primary' @click='saveMenu()'>确 定</el-button>
                      </div>
                    </el-dialog>
                  </div>

                </div>
              </el-tab-pane>
            </el-tabs>
          </div>



        </div>
</template>
<script>
import {
  roleList,
  isExistCode,
  insert,
  update,
  allMenu,
  getMenuByRole,
  menuAdd
} from '@/api/role';
export default {
  data () {
    return {

      activeName: 'index',

      dialogMenuVisible: false,
      checkedMenu: [],
      roleMenu: [],
      allMenu: [],



      checkedRoleId: '',

      isDisable: false,
      pageable: {
        currentPage: 1,
        pageSize: 10
      },
      tableData: [],
      RoleTextMap: {
        update: '编辑角色',
        create: '新建角色',
        menu: '分配菜单'
      },
      roleTypes: [],
      dialogRoleVisible: false,
      dialogRoleOption: '',
      roleForm: {},
      rules: {
        code: [
          {
            required: true,
            message: '请输入角色编码',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入角色名称',
            trigger: 'blur'
          }
        ],
        remarks: [
          {
            max: 100,
            message: '长度在 100个字符之内'
          }
        ]
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  },
  methods: {
    isExistCode () {
      var _this = this;
      if (_this.roleForm.code) {
        isExistCode(_this.roleForm.code).then(response => {
          if (response.code == 0 && response.data) {
            this.$message({
              message: response.message,
              type: 'error'
            });
            return true;
          }
          return false;
        });
      }
    },
    cancel(){
      this.dialogRoleVisible = false;
    },
    openRole () {
      this.roleForm = {
        id: '',
        code: '',
        remarks: '',
        name: '',
        status: 1
      };
      this.dialogRoleOption = 'create';
      this.dialogRoleVisible = true;
    },
    saveRole (roleForm) {
      var _this = this;
      this.isDisable = true;
      setTimeout(() => {
        this.isDisable = false;
      }, 2000);

      this.$refs.roleForm.validate(valid => {
        if (valid) {
          insert(_this.roleForm).then(response => {
            if (response.code == 0) {
              _this.pageable.currentPage = 1;
              _this.dataList();
              this.$message({
                message: response.message,
                type: 'success'
              });
              this.dialogRoleVisible = false;
            } else {
              this.$message({
                message: response.message,
                type: 'error'
              });
            }
          });
        }
      });
    },
    openUpdate (row) {
      this.roleForm = {
        id: row.id,
        code: row.code,
        name: row.name,
        remarks: row.remarks,
        type: row.type,
        status: row.status
      };
      this.dialogRoleOption = 'update';
      this.dialogRoleVisible = true;
    },
    updateRole (form) {
      var _this = this;
      this.isDisable = true;
      setTimeout(() => {
        this.isDisable = false;
      }, 2000);
      if (!_this.roleForm.name) {
        this.$message({
          message: '请输入角色名称',
          type: 'error'
        });
        return;
      }
      update(_this.roleForm).then(response => {
        if (response.code == 0) {
          this.$message({
            message: response.message,
            type: 'success'
          });
          var data = _this.tableData;

          for (var i = 0; i < data.length; i++) {
            var t = data[i];
            if (t.id == _this.roleForm.id) {
              t.name = _this.roleForm.name;
              t.remarks = _this.roleForm.remarks;
              t.status = _this.roleForm.status;
              this.dialogRoleVisible = false;
              return;
            }
          }
          this.dialogRoleVisible = false;
        }
      });
    },
    openMenu (row) {
      var _this = this;
      _this.checkedMenu = [];
      _this.roleMenu = [];
      var roleId = row.id;
      _this.checkedRoleId = roleId;
      getMenuByRole(roleId).then(response => {
        var data = response.data;
        if (data) {
          data.forEach(function (d) {
            console.log(d)
            _this.roleMenu.push(d.id);
          });
        }
      });
      _this.checkedMenu = _this.roleMenu;
      _this.dialogRoleOption = 'menu';
      _this.dialogMenuVisible = true;
    },
    saveMenu () {
      var _this = this;
      this.isDisable = true;
      setTimeout(() => {
        this.isDisable = false;
      }, 2000);
      var checkedMenu = this.$refs.menuTree.getCheckedKeys();
      menuAdd(_this.checkedRoleId, checkedMenu).then(response => {
        if (response.code == 0) {
          _this.$message({
            message: response.message,
            type: 'success'
          });
          _this.dialogMenuVisible = false;
        }
      });
    },
    cancelMenu () {
      this.dialogMenuVisible = false;
    },


    //分页
    handleClick (tab, event) {
      // return this.$store.state.options;
      return this.$router.push({
        path: '/home/power/' + tab.name
      });
    },
    dataList () {
      roleList(this.pageable.currentPage, this.pageable.pageSize).then(
        response => {
          if (response.code !== 0) {
            this.$message({
              message: response.message,
              type: 'error'
            });
          } else {
            this.pageable = {
              total: response.data.pageInfo.total,
              pageSize: response.data.pageInfo.pageSize,
              currentPage: parseInt(response.data.pageInfo.page) + 1
            };

            this.tableData = response.data.data;
          }
        }
      );
    },
    handleSizeChange (val) {
      this.pageable.pageSize = val;
      this.dataList();
    },
    handleCurrentChange (val) {
      this.pageable.currentPage = val;
      this.dataList();
    }
  },
  watch: {
    checkedMenu: function (s) {
      if (this.$refs.menuTree) {
        this.$refs.menuTree.setCheckedKeys(s);
      }
    }
  },
  created: function () {
    this.dataList();

    allMenu().then(response => {
      if (response.code == 0) {
        var da = response.data;
        this.allMenu = da;
      } else {
        this.$message({
          message: response.message,
          type: 'error'
        });
      }
    });
  }
};
</script>
